<template>
    <div>
        <!-- <blue-button text="编辑" :clickEvent="addClickEvent" class="add-btn"></blue-button> -->
        <!-- <table class="sv-table">
			<tr class="table-th">
				<th>配置项</th> -->
				<!-- <th>创建日期</th> -->
				<!-- <th>生效时间</th> -->
				<!-- <th>状态</th> -->
				<!-- <th>操作</th>
			</tr>

			<tr class="table-tr" v-for="(item, index) in Object.keys(config)" :key="index">
				<td>{{options[item]}}</td> -->

				<!-- <td>{{item}}</td> -->
				<!-- <td>{{item.state}}</td> -->
				<!-- <td><span :class="[item.state == '1' ? 'banner-qiyong' : 'banner-tingyong']">{{item.state == "1" ? "已启用" : "已停用"}}</span></td> -->
				<!-- <td class="handle-button" ref="handleButton">
					<gray-button v-if="item == 'title'" text="编辑" :clickEvent="editClickEvent.bind(this, index)"></gray-button> 
					<gray-button v-if="item != 'title'" :text="config[item] ? '停用' : '启用'" :clickEvent="enableClickEvent.bind(this,item)"></gray-button> -->

					<!-- <gray-button text="删除" :disabled="item.state == '1'" :clickEvent="deleteClickEvent.bind(this, item.id, item.state)"></gray-button> -->
				<!-- </td> -->
			<!-- </tr>
		</table> -->
		<div style="width:100%;height:20px;text-align:left;">
			<span style="float:left;margin-top:5px;width:120px;">标题内容:</span>
			<input style="float:left;width:300px;height:30px;border:1px solid #DDDDDD;border-radius:3px;" v-model="config.title" @blur="changeTitle" type="text"/>
		</div>
		<div class="bannerstyle" v-for="(item, index) in Object.keys(config)" :key="index">
			<span style="display:inline-block;width:120px;" v-if="item != 'title'">{{options[item]}}</span>
			<div class="banneranim" v-if="item != 'title'">
				<cirle-select class="stylename" :state="config[item]" :clickEvent="enableClickEvent.bind(this,item,true)"></cirle-select><span>启用</span>
				<cirle-select class="stylename" :state="!config[item]" :clickEvent="enableClickEvent.bind(this,item,false)"></cirle-select><span>停用</span>
			</div>
		</div>
    </div>
</template>
<script>
import BlueButton from "../../../edit-components/BlueButton";
import GrayButton from "../../../edit-components/GrayButton";
import EditModel from "../../../edit-components/EditModel";
import CirleSelect from "../../../edit-components/CirleSelect";
import PagePath from "../../../edit-components/PagePath";
import {mapGetters} from "vuex";
import {getPageTree} from "../../../utils/getPageTree";
import Toast from "../../../edit-components/Toast";
import Dialog from "../../../edit-components/Dialog";
import {getPageNameOrVirtualPageName} from "../../../utils/getPageName";
//引用起名规则的文件
import * as prefix from "../../../config/page-name/gw/virtualpagename-prefix.js";
export default {
	name: 'hello',
	props: {
		componentId: {
			type: String,
			default: ""
		}
	},
	data () {
		return {
			config: {
				title: "标题",
				hasTitle: false,
				hasLogo: false,
				hasCart: false,
				hasBack: false,
				hasSearch: false,
				hasList: false
			}
			,
			options:{
				title: "标题",
				hasTitle: "是否显示标题",
				hasLogo: "是否显示logo",
				hasCart: "是否显示购物车",
				hasBack: "是否显示返回箭头",
				hasSearch: "是否显示搜索",
				hasList: "是否显示列表"
			}
		}
	},
	computed: {
		...mapGetters({
            optionsArr: 'qxz/getOprionArr'
		}),
		editConfig() {
            return this.$store.getters.editConfig;
        },
		componentType() {
			return this.editConfig.type;
		},
		currentVDO() {
			return this.getCurrentVDO(this.editConfig.id);
		},
		pageName() {
			return getPageNameOrVirtualPageName();
		}
	},
	methods: {
		_setEditConfig(id, config, page = this.pageName) {
			this.setEditConfig(id, config, page);
		},
		//新增按钮的事件，调出模态框
		addClickEvent() {
			this.handleType = "add";
			this.$refs.editModel.showCover();
		},
		//编辑按钮的事件
		editClickEvent(index) {
			this.itemName = getPageTree(this, "home").header.TabHead[0].config.pages[index].name;
			this.editIndex = index;
			this.handleType = "edit";
			this.$refs.editModel.showCover();
		},

		//启用启用禁用的事件
		enableClickEvent(item,status) {
			this.config[item] = status;
			this._setEditConfig(this.componentId, this.config);
		},

		//更改title内容
		changeTitle () {
			this._setEditConfig(this.componentId, this.config);
		},
		//模态框中提交确定按钮的事件
		//处理两个流程
		//1：往tabhead的config添加一个运营类目
		//2：向domTree中添加一个对应的虚拟页面
		//引用/src/config/page-name/gw/virtualpagename-prefix文件
		//使用该前缀+index值的命名规则
		submitClickEvent() {
			//进行编辑操作
			if (this.handleType === "edit") {
				let obj = getPageTree(this, this.pageName).header.TabHead[0].config;
				obj.pages[this.editIndex] = {
					...obj.pages[this.editIndex],
					name: this.itemName
				}
				// let editObj = {
				// 	...obj,
				// 	name: this.itemName
				// }
				this.setEditConfig(this.relGroup, obj, this.pageName);
				//关闭editmodel
				this.$refs.editModel.hideCover();
				return;
			}
			let obj = this.currentVDO;
			// console.log(obj);
			if (!obj.config) {
				obj.config = {
				};
			}
			if (!obj.config.pages) {
				obj.config.pages = [];
			}
			// let virtualPage = prefix.SELF_CLASSIFY_PAGE + obj.config.pages.length + 1;
			let page = {
				id: "th" + parseInt(Math.random() * 100000),
				name: this.itemName,
				createTime: this.timeFormatFn(new Date().getTime()),
				state: "1",
				virtualPage: prefix.SELF_CLASSIFY_PAGE + (obj.config.pages.length + 1)
			}
			obj.config.pages.push(page);
			// console.log("obj.config", obj.config);
			//将改变后的config对象保存到对应的Object
			this.setEditConfig(this.editConfig.id, obj.config);
			//添加对应虚拟页面
			this.$store.commit("setDomTree", {
				[prefix.SELF_CLASSIFY_PAGE + obj.config.pages.length]: {
					header: [],
					content: [],
					footer: [],
					config: {test: "23323232323"}
				}
			});
			//自动切换到新的运营类目页面
			setTimeout(() => {
				this.changePageShown(obj.config.pages.length);
			}, 300);
			//关闭editmodel
			this.$refs.editModel.hideCover();
		},
		//自动切换到新的运营类目页面
		changePageShown(index) {
			this.$store.commit("cjy/CHANGE_CLASSIFY_INDEX", index);
		},
		//将时间戳转换时间
		timeFormatFn(time) {
			let date = new Date(time);
			return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
		}
	},
	filters: {
		timeFormat(time) {
			if(time) {
				let date = new Date(time);
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
			} else {
				return "无"
			}
		}
	},
	created () {
		// console.log(this.$store);
	},
	mounted () {
		console.log(this.currentVDO,"2342343423");
		this.currentVDO.config.title ? this.config = this.currentVDO.config : "";
	},
	components: {
		// "handle-button": HandleButton,
		"blue-button": BlueButton,
		"gray-button": GrayButton,
		"edit-model": EditModel,
		"cirle-select": CirleSelect,
		"page-path": PagePath,
		"m-toast": Toast,
		"m-dialog": Dialog,
	},

}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.add-btn {
		margin-bottom: 10px;
	}
	
	.handle-button>div {
		margin: 0 1px;
	}
	
	.handle-button .sdrag-gray-btn {
		/* height: 26px; */
	}
	
	.banner-edit-box {
		position: fixed;
		left: 0;
		top: 0;
	}
	
	.edit-cover {
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 0.3s;
	}
	
	.edit-cover-show {
		/* opacity: 0.4; */
		/* transition: all 1s;  */
	}
	
	.edit-cover-hide {
		/* opacity: 0; */
		/* transition: all 1s ease-out 1s; */
	}
	
	.edit-content {
		background: #fff;
		width: 600px;
		height: 300px;
		position: absolute;
		left: 0;
		right: 0;
		border-radius: 3px;
		margin: auto;
		/* transform: translateY(30px); */
		transform: translateY(-300px);
		transition: transform 0.3s ease-out;
	}
	
	.edit-content-show {
		/* transform: translateY(30px);  */
	}
	
	.edit-title-box {
		display: flex;
		box-sizing: border-box;
		padding: 15px;
		width: 100%;
		height: 60px;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ddd;
	}
	
	.edit-close {
		font-size: 20px;
		font-weight: bold;
		color: #ddd;
		cursor: pointer;
	}
	
	.edit-close:hover {
		color: #444;
	}
	/* 编辑区域的样式 */
	
	.slot-banner {}
	
	.slot-banner>div {
		display: flex;
		/* margin-top:  */
		margin-bottom: 10px;
		align-items: center;
	}
	
	.slot-banner>div input[type=radio] {
		width: unset;
	}
	
	.el-date-editor {
		width: 50%;
		border: 1px solid #ddd;
		height: 28px;
	}
	
	.el-date-editor input {
		height: 28px;
	}
	
	.el-input__inner {
		height: 28px !important;
	}
	
	.upload-box {
		border: 1px solid #ddd;
	}
	
	.banner-qiyong {
		background-color: #2980b9;
		color: #fff;
		font-size: 12px;
		border-radius: 3px;
		padding: 1px;
	}
	
	.banner-tingyong {
		background-color: #e74c3c;
		color: #fff;
		font-size: 12px;
		border-radius: 3px;
		padding: 1px;
	}
	
	.fabu-box {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	
	.bannerstyle {
		text-align: left;
		margin-top: 25px;
	}
	
	.bannerstyle .stylename {
		display: inline-block;
		vertical-align: middle;
		margin: 0px 15px;
	}
	
	.bannerstyle .banneranim {
		display: inline-block;
		margin-right: 15px;
	}
	
	.bannermySelect {
		border: 1px solid #ddd;
		padding: 5px 5px;
		width: 50%;
		height: unset;
		margin-bottom: 10px;
	}
</style>